/**
 * 样式常量文件
 * 统一管理应用中重复使用的样式值
 */

import { Platform, StyleSheet } from 'react-native';

// 颜色常量 - 柔和高级配色方案（白、黑、灰、橘）
export const COLORS = {
  // 主色调 - 橘色（略微降饱和，避免过于鲜艳）
  primary: '#f27a3a',
  primaryLight: '#fff3e8', // 非常淡的橘色背景
  primarySoft: '#ffe2cf', // 柔和的橘色背景
  primaryMedium: '#f58a4c', // 中等橘色
  primaryDark: '#d8622d', // 深橘色

  // 基础颜色
  white: '#ffffff',
  black: '#1a1a1a', // 不是纯黑，更柔和

  // 文字颜色 - 从黑到灰的层次
  text: {
    primary: '#1a1a1a', // 主要文字
    secondary: '#4a4a4a', // 次要文字
    tertiary: '#6c757d', // 三级文字
    quaternary: '#adb5bd', // 四级文字
    placeholder: '#ced4da', // 占位符
    disabled: '#dee2e6', // 禁用
    light: '#e9ecef', // 浅色文字
  },

  // 背景颜色 - 柔和的灰色系列，避免大面积纯白
  background: {
    primary: '#f4f4f6', // 主背景：略带灰度的暖白
    secondary: '#f0f1f3', // 次要背景
    tertiary: '#e6e7eb', // 三级背景（列表底、页面大背景）
    card: '#fdfdfd', // 卡片背景：接近白，但不刺眼
    overlay: 'rgba(15, 23, 42, 0.6)', // 遮罩层：略带蓝灰感的深色
    hover: '#f0f1f3', // hover 状态
  },

  // 边框颜色 - 柔和的灰色
  border: {
    light: '#f1f3f5',
    medium: '#e9ecef',
    dark: '#dee2e6',
  },

  // 状态颜色 - 柔和的版本（不鲜艳）
  status: {
    success: '#6c757d', // 用灰色替代鲜艳的绿色
    error: '#ff6b35', // 用主色替代鲜艳的红色
    warning: '#ff8e53', // 用橘色替代鲜艳的黄色
    info: '#6c757d', // 用灰色替代鲜艳的蓝色
  },

  // 其他
  transparent: 'transparent',
  shadow: 'rgba(0, 0, 0, 0.08)', // 柔和的阴影
};

// 圆角常量
export const RADIUS = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  xxl: 24,
  round: 999,
};

// 间距常量
export const SPACING = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  xxl: 24,
  xxxl: 32,
};

// 字体大小
export const FONT_SIZE = {
  xs: 10,
  sm: 12,
  md: 14,
  lg: 16,
  xl: 18,
  xxl: 20,
  xxxl: 22,
  huge: 28,
};

// 字体粗细
export const FONT_WEIGHT = {
  normal: '400',
  medium: '500',
  semibold: '600',
  bold: '700',
};

// 阴影样式
export const SHADOWS = {
  // 小阴影
  sm: Platform.select({
    ios: {
      shadowColor: COLORS.shadow,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.1,
      shadowRadius: 4,
    },
    android: {
      elevation: 2,
    },
    default: {},
  }),

  // 中等阴影
  md: Platform.select({
    ios: {
      shadowColor: COLORS.shadow,
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.15,
      shadowRadius: 8,
    },
    android: {
      elevation: 4,
    },
    default: {},
  }),

  // 大阴影
  lg: Platform.select({
    ios: {
      shadowColor: COLORS.shadow,
      shadowOffset: { width: 0, height: 8 },
      shadowOpacity: 0.2,
      shadowRadius: 16,
    },
    android: {
      elevation: 8,
    },
    default: {},
  }),
};

// 卡片样式
export const CARD_STYLES = {
  base: {
    backgroundColor: COLORS.white,
    borderRadius: RADIUS.lg,
    ...SHADOWS.md,
  },

  bordered: {
    backgroundColor: COLORS.white,
    borderRadius: RADIUS.lg,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: COLORS.border.light,
  },
};

// 徽章样式
export const BADGE_STYLES = {
  level: {
    // 徽章使用主色的透明版本，避免过于鲜艳
    backgroundColor: 'rgba(242, 122, 58, 0.9)',
    color: COLORS.white,
  },

  distance: {
    backgroundColor: 'rgba(0, 0, 0, 0.6)',
    color: COLORS.white,
  },
};

// 常用位置坐标
export const DEFAULT_LOCATION = {
  // 乌鲁木齐国际大巴扎
  urumqi: {
    latitude: 43.8256,
    longitude: 87.6168,
    latitudeDelta: 0.02,
    longitudeDelta: 0.02,
  },
};
